<template>
  <view>
    <view class="Atop">
      <input type="text" placeholder="搜索你想要的内容" placeholder-class="inputolder">
    </view>
    <view class="Acenter">
      <scroll-view scroll-x="true" enhanced='true' show-scrollbar='false'>
        <view>推荐</view>
        <view v-for="item in list">{{item.name}}</view>
      </scroll-view>
    </view>
    <view class="Abottom">
      <swiper>
        <swiper-item>
          <view class="swiper-item"></view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  import {
    http
  } from '../../http.js'
  export default {
    data() {
      return {
        list: []
      }
    },
    methods: {
      async getlist() {
        let cui = await http({
          url: 'article/api/category/label/list',
          method: 'GET'
        })
        this.list = cui.data.data
        console.log(this.list)
      },
    },
    onLoad() {
      this.getlist()
    }
  }
</script>

<style lang="less">
  .Acenter {
    white-space: nowrap;

    scroll-view {
      ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        background-color: transparent;
      }

      view {
        height: 100rpx;
        line-height: 100rpx;
        // border: 1rpx solid red;
        display: inline-block;
        margin: 0 20rpx;
      }
    }
  }

  .Atop {
    width: 100%;
    height: 100rpx;
    background-color: #345dc2;
    display: flex;
    align-items: center;
    justify-content: space-around;

    input {
      width: 700rpx;
      height: 60rpx;
      background-color: #f0f1f2;
      border-radius: 50rpx;

      .inputolder {
        color: #979c9d;
        margin-left: 250rpx;
      }
    }
  }
</style>
